
<template>
  <div class="showStudents">
    <el-dialog
      title="得分项"
      append-to-body
      :visible.sync="showBuJiGeStudentsFlag"
      width="1000px"
      :before-close="showStudentsClose">
      <div class="inner inner-content-box">
        <div class="box_title">
          <div class="title-inner">
            <p class="first">考题：</p>
            <p class="second" style="color: #00b99e;">{{ stationStudentsObj.examinationName }}</p>
          </div>
          <div class="title-inner">
            <p class="first" style="font-weight: 400;font-size: 14px;">考试：</p>
            <p class="second" style="font-weight: 500;font-size: 14px;">{{ recordsObj.recordsName }}</p>
          </div>
          <div class="title-inner">
            <p class="first" style="font-weight: 400;font-size: 14px;">起止日期：</p>
            <p class="second" style="font-weight: 500;font-size: 14px;">{{ recordsObj.examStartDate }} 至 {{ recordsObj.examEndDate }}</p>
          </div>
        </div>
        <div class="box_title" style="height: auto;">
          <div class="title-inner">
            <p class="first" style="width: 80px;">得分项：</p>
            <p class="second" style="color: #00b99e;flex: 1;font-weight: 400;color: #333;font-size: 14px;">{{ chooseStudent.scoreCardItem || chooseStudent.scoreCardScoringCriteria }}</p>
          </div>
          
        </div>
        <div class="searchBox">
          <el-form
            :inline="true"
            :model="searchForm"
            size="small"
            style="width: 100%"
          >
            <el-form-item label="不通过">
              <span style="color: red;font-size: 16px;font-weight: 500;">{{ chooseStudent.bujigeCount }}</span> 人
            </el-form-item>
          </el-form>
        </div>
        
        <div class="detailsBox" >
          <ag-grid-vue
            class="ag-theme-alpine ag-theme-quartz"
            style="height: calc( 100vh - 400px )"
            :gridOptions="gridOptions"
            :localeText="localeText"
            @grid-ready="onGridReady"
            @sort-changed="onSortChangedAggrid"
            @filter-changed="onFilterChangedAggrid"
            :rowHeight="38"
            :headerHeight="42"
            :columnDefs="columnDefs"
            :defaultColDef="defaultColDef"
            :rowData="scoreInfoList"
            rowSelection="multiple"
            :rowMultiSelectWithClick="true"
            :enableRangeSelection="true"
          >
          </ag-grid-vue>
        </div>
      </div>
    </el-dialog>
    <studentInfoDialog ref="studentInfoDialog" :chooseStudent='chooseStudent'></studentInfoDialog>

  </div>
</template>

<script>
import { examResultPageItem } from '@/api/examinationScore.js'
import studentInfoDialog from '@/views/modules/examinationScore/studentInfoDialog/studentInfoDialog.vue'

export default {
  props: ['recordsObj', 'stationStudentsObj', 'chooseStudent', 'examScoreSet'],
  components: {
    studentInfoDialog
  },
  data () {
    return {
      showBuJiGeStudentsFlag: false,
      dataList: [
        {
          id: 0,
          title: '考站维度'
        },
        {
          id: 1,
          title: '考题维度'
        },
        {
          id: 2,
          title: '得分项维度'
        },
        {
          id: 3,
          title: '考生维度'
        }
      ],
      activeKey: 0,
      gridOptions: null,
      localeText: this.$AG_GRID_LOCALE_ZZZ,
      col: [],
      searchForm: {
        scoreItem: ''
      },
      defaultColDef: {
        editable: false,
        sortable: true,
        resizable: true,
        filter: true,
        cellDataType: false
      },
      rowIndexArr: [
        {
          field: 'rowIndex',
          headerName: '序号',
          width: 70,
          checkboxSelection: false,
          headerCheckboxSelection: false,
          sortable: false,
          pinned: 'left',
          valueGetter: (params) => {
            // 返回当前行的序号
            return params.node.rowIndex + 1
          }
        },
        {
          headerName: '姓名',
          field: 'studentName',
          filter: 'studentName',
          tooltipField: 'studentName',
          width: 120,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          },
          cellRenderer: 'studentInfo',
          pinned: 'left'
        },
        {
          headerName: '得分',
          field: 'pingJunDeFen',
          filter: 'pingJunDeFen',
          tooltipField: 'pingJunDeFen',
          width: 80,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          },
          pinned: 'right'
        }
      ],
      columnDefs: [],
      gridApi: null,
      chooseStudent: {},
      scoreInfo: {},
      scoreInfoList: []
    }
  },
  beforeMount () {
    this.gridOptions = {
      // 通过这个属性建立了上下文引用
      context: { componentParent: this }
      // 说人话就是可以在自己声明的组件里调用到父组件的方法和属性了
    }
  },
  methods: {
    // 查看不及格列表
    showBuJiGeStudentsHandle () {
      this.showBuJiGeStudentsFlag = true
      setTimeout(() => {
        this.getList()
      }, 100)
    },
    showStudentsClose () {
      this.showBuJiGeStudentsFlag = false
    },
    // 查看学生
    viewStudentHandle (val) {
      if (val.bujigeCount === 0) {
        this.$message.warning('暂无不及格考生')
        return
      }
      this.chooseStudent = val
      this.$refs.studentInfoDialog.openShowStudent()
    },
    // 装载列表
    onGridReady (params) {
      this.gridApi = params.api
    },
    onSortChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.scoreInfoList))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.scoreInfoList = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    onFilterChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.scoreInfoList))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.scoreInfoList = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    getList () {
      console.log(this.chooseStudent, this.examScoreSet)
      let params = Object.assign({
        recordsId: this.recordsObj.id,
        examinationId: this.recordsObj.examinationId,
        // 不及格
        studentType: 0,
        page: 1,
        limit: 1000000
      })
      if (this.examScoreSet === '1') {
        // 大分项目 传name
        params.scoreCardItem = this.chooseStudent.scoreCardItem
      } else {
        // 小分项 传id
        params.scoreCardId = this.chooseStudent.scoreCardId
      }
      examResultPageItem(params).then(res => {
        // 表头用第一个学生来搞
        let arr = res.data.page.records
        let firstStudent = arr[0]
        let aaa = []
        firstStudent.itemResults.map((q, index) => {
          aaa.push({
            headerName: '考官' + Number(index + 1) + '姓名',
            field: 'teacher' + Number(index + 1),
            filter: 'teacher' + Number(index + 1),
            tooltipField: 'teacher' + Number(index + 1),
            minWidth: 160,
            flex: 1,
            sortable: true,
            resizable: true,
            hide: false,
            editable: false
          })
          aaa.push({
            headerName: '考官' + Number(index + 1) + '得分',
            field: 'result' + Number(index + 1),
            filter: 'result' + Number(index + 1),
            tooltipField: 'result' + Number(index + 1),
            minWidth: 160,
            flex: 1,
            sortable: true,
            resizable: true,
            hide: false,
            editable: false
          })
        })
        arr.map(pq => {
          pq.itemResults.map((q, index) => {
            // name
            let key1 = 'teacher' + Number(index + 1)
            // result
            let key2 = 'result' + +Number(index + 1)
            // score
            pq[key1] = q.teacherName || '暂无'
            pq[key2] = q.result
          })
        })
        // 获取表头
        this.columnDefs = []
        setTimeout(() => {
          this.columnDefs = this.rowIndexArr.concat(aaa)
          this.scoreInfoList = JSON.parse(JSON.stringify(arr))
        }, 10)
      })
    }
  }
}
</script>

<style lang='scss'>
  .showStudents{
    background: pink;
  }
  .box_title{
    height: 40px;
    width: 100%;
    background: #00b99e20;
    margin: 10px 0;
    border-radius: 6px;
    display: flex;
    font-size: 16px;
    padding-left: 10px;
    justify-items: center;
    align-items: center;
    .title-inner{
      display: flex;
      .first{
        padding-right: 2px;
        color: #666;
      }
      .second{
        padding-right: 40px;
        font-weight: 500;
      }
    }
  }
</style>